import { ref, reactive, watch, onMounted, toValue } from 'vue'
import { unrefElement, tryOnMounted } from '@vueuse/core'


export type DirectionType = 'vertical' | 'horizontal' | 'both'

export const useElementResizable = (el, {
    direction = 'vertical'
}) => {


    let size = reactive({
        width: 0,
        height: 0
    })

    let $elem = null
    tryOnMounted(() => {
        $elem = unrefElement(el)
        if (!$elem) {
            return console.warn('target element needs to be html element');
        }
        // bundle click event handler
        $elem.addEventListener('click', clickHandler)
    })
    
    const anchors = 
    direction === 'horizontal' ? ['left', 'right'] :
    direction === 'vertical' ? ['top', 'bottom'] :
    direction === 'both' ? ['left', 'right', 'top', 'bottom', 'left-top', 'left-bottom', 'right-top', 'right-bottom'] : []

    let pressed = false
    let currentMoveDirection = ref('')
    const handlemousedown = (item) => {
        pressed = true

        currentMoveDirection.value = item
        document.addEventListener('mousemove', handlemousemove)
        document.addEventListener('mouseup', handlemouseup)
    }

    const handlemousemove = (e) => {
        e.stopPropagation()
        if (!pressed) return
        
        const { clientX, clientY } = e
        console.log(e)

        switch(currentMoveDirection.value) {
            case 'right-bottom':
                size.height = clientY
                size.width = clientX
                break
            case 'bottom':
                size.height = clientY
                break;
            case 'right':
                size.width = clientX
                break
        }
    }

    const handlemouseup = (e) => {
        pressed = false
        document.removeEventListener('mousemove', handlemousemove)
        document.removeEventListener('mouseup', handlemouseup)
    }

    watch(size, () => {
        setContainerSize()
    })

    const setContainerSize = () => {
        newContainer.setAttribute("style", `width: ${size.width}px;height: ${size.height}px`)
        $elem.setAttribute("style", `width: ${size.width}px;height: ${size.height}px`)
    }


    let newContainer;
    const _createContainerBox = () => {
        // create container
        newContainer = document.createElement('div')
        newContainer.classList.add(...['box', 'box-resizable'])
        newContainer.setAttribute("style", `width: ${size.width}px;height: ${size.height}px`)

        $elem.setAttribute("style", `width: ${size.width}px;height: ${size.height}px`)
        $elem && $elem.after(newContainer)
        newContainer.appendChild($elem)

        anchors.forEach(item => {
            const boxResize = document.createElement('div')
            boxResize.classList.add(`box-resize-${item}`)
            boxResize.addEventListener('mousedown', (e) => handlemousedown(item, e))
            newContainer.appendChild(boxResize)
        })
    }

    const _dropContainerBox = () => {
        if (!newContainer) return
        newContainer.after($elem)
        newContainer.parentNode.removeChild(newContainer)
        newContainer = null
    }

    const clickHandler = (e) => {
        e.stopPropagation();

        // get target element size
        const { width, height } = e.target.getBoundingClientRect()
        size.width = width
        size.height = height

        _createContainerBox()
    }
    
    

    return {
        calcel: _dropContainerBox
    }
}